{% extends 'layout/manage.html' %}
{% load static %}
{% block css %}
    <style>
            .panel-default {
            margin-top: 10px;
        }

        .panel-default .panel-heading {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        .panel-body {
            padding: 0;
        }
        .panel-default > .panel-heading span {
            padding: 0 5px;
        }

        .panel-default > .panel-heading .function .upload {
            overflow: hidden;
        }

        .panel-default > .panel-heading .function .upload input {
            opacity: 0;
            position: absolute;
            top: 0;
            bottom: 0;
            width: 76px;
            left: -2px;
            overflow: hidden;
        }

    .upload-progress{
        position: fixed;
        right: 2px;
        bottom: 2px;
        width: 400px;
    }

    </style>
{% endblock %}

{% block content %}
<div class="container-fluid">

<div class="panel panel-default">
      <!-- Default panel contents -->
      <div class="panel-heading">
          <div><a href="{% url 'file' project_id=request.tracer.project.id %}">
                    <i class="fa fa-home" aria-hidden="true"></i>&nbsp;文件库</a>
                    {% for breadcrumb in breadcrumb_list %}
                        <a href="{% url 'file' project_id=request.tracer.project.id %}?folder_id={{ breadcrumb.id }}">
                    <i class="fa fa-caret-right" aria-hidden="true"></i>&nbsp;{{ breadcrumb.name }}</a>
                    {% endfor %}

                  </div>
                <div class="function">
                    <div class="btn btn-primary btn-xs upload" style="position: relative">
                        <div><i class="fa fa-upload" aria-hidden="true"></i> 上传文件</div>
                        <input type="file" multiple name="uploadFile" id="uploadFile">
                    </div>
                    <a class="btn btn-success btn-xs" data-toggle="modal" data-target="#addModal" data-whatever="新建文件夹">
                        <i class="fa fa-plus-circle" aria-hidden="true"></i> 新建文件夹
                    </a>
                </div>
      </div>

      <!-- Table -->
      <table class="table">
        <thead>
          <tr>
            <th>名称</th>
            <th>文件大小</th>
            <th>更新者</th>
            <th>更新时间</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody id="rowList">
        {% for file_obj in file_obj_list %}
          <tr>
              <td>{% if file_obj.file_type == 1 %}
                  <i class="fa fa-file" aria-hidden="true"></i>
                   {{ file_obj.name }}
              {% else %}
                   <a href="{% url 'file' project_id=request.tracer.project.id %}?folder_id={{ file_obj.id }}">
                      <i class="fa fa-folder" aria-hidden="true"></i>
                       {{ file_obj.name }}
                   </a>
              {% endif %}</td>
            <td> {% if file_obj.file_type == 1 %}{{ file_obj.file_size }}{% else %}-{% endif %}</td>
            <td>{{ file_obj.update_user.username }}</td>
            <td>{{ file_obj.update_datetime }}</td>
            <td>
                {% if file_obj.file_type == 2 %}
                <a href="#" type="button" class="btn btn-default btn-xs"
                   data-toggle="modal" data-target="#addModal"
                   data-whatever="编辑文件夹"
                   data-name="{{ file_obj.name }}"
                   data-fid="{{ file_obj.id }}"
                >
                    <i class="fa fa-edit" aria-hidden="true"></i>
                </a>
                {% else %}
                    <a href="{% url 'file_download' project_id=request.tracer.project.id file_id=file_obj.id %}" class="btn btn-default btn-xs download">
                        <i class="fa fa-download" aria-hidden="true"></i>
                    </a>
                {% endif %}
                <a href="#" type="button" class="btn btn-danger btn-xs"
                    data-toggle="modal" data-target="#alertModal" data-fid="{{ file_obj.id }}">
                    <i class="fa fa-trash" aria-hidden="true"></i>
                </a>
            </td>

          </tr>
        {% endfor %}
        </tbody>
      </table>
    </div>

<!-- Alert Modal -->
<div class="modal fade" id="alertModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
      <div class="alert alert-danger alert-dismissible fade in" role="alert">
      <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
      <h4>是否确实删除？</h4>
      <p style="padding-top: 20px; padding-bottom: 20px">
          文件夹中包含的所有文件都会被删除。
      </p>
       <p style="text-align: right;">
            <a class="btn btn-default btn-sm" data-dismiss="modal" aria-label="Close">取 消</a>
            <button id="btnDelete" type="button" class="btn btn-danger btn-sm">确 定</button>
       </p>
    </div>
  </div>
</div>

<!-- Modal -->
<div class="modal fade" id="addModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">

          <form id="form" method="post">
          {% csrf_token %}
              <input type="text" class="hide" name="fid" id="fid">
              {% for field in form %}
                  <div class="form-group">
                    <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                    {{ field }}
                  <span class="error-msg">{{ field.errors.0 }}</span>
                  </div>
              {% endfor %}
        </form>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
        <button type="button" class="btn btn-primary" id="btnFormSubmit">确定</button>
      </div>
    </div>
  </div>
</div>

</div>
<div class="upload-progress hide" id="uploadProgress">
    <div class="panel panel-primary">
      <div class="panel-heading">
        <i class="fa fa-cloud-upload"></i> 上传进度
      </div>
      <table class="table">
          <tbody id="progressList">

          </tbody>
      </table>
    </div>
</div>

    <div class="hide">
        <table id="progressTpl">
            <tr>
              <td>
                  <div class="name">视频</div>
                  <div class="progress">
                      <div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0;">
                        0%
                      </div>
                    </div>
                  <div class="progress-error"></div>
              </td>
          </tr>
        </table>
    </div>


    <div class="hide">
        <table id="rowTpl">
            <tr>
                <td><i class="fa fa-file" aria-hidden="true"></i>
                    <span class="name"></span>
                </td>
                <td class="file_size"></td>
                <td class="update_user"></td>
                <td class="update_datetime"></td>
                <td>
                    <a class="btn btn-default btn-xs download">
                        <i class="fa fa-download" aria-hidden="true"></i>
                    </a>
                    <a href="" class="btn btn-danger btn-xs delete" data-toggle="modal" data-target="#alertModal">
                        <i class="fa fa-trash" aria-hidden="true"></i>
                    </a>
                </td>
            </tr>
        </table>
    </div>

{% endblock %}

{% block js %}
    <script src="{% static 'js/cos-js-sdk-v5.min.js' %}"></script>
    <script>
    var FOLDER_URL = "{% url 'file' project_id=request.tracer.project.id %}";
    var FILE_DELETE_URL = "{% url 'file_delete' project_id=request.tracer.project.id %}";
    var COS_CREDENTIAL = "{% url 'cos_credential' project_id=request.tracer.project.id %}";
    var FILE_POST = "{% url 'file_post' project_id=request.tracer.project.id %}";
    var CURRENT_FOLDER_ID = "{{ parent_obj.id }}";

    /*
        // 只执行一次，过期会自动获取
    var COS_OBJ = new COS({
        getAuthorization: function (options, callback) {
        // 异步获取临时密钥
        $.get(COS_CREDENTIAL, {
            // bucket: options.Bucket,
            // region: options.Region,
        }, function (data) {
            var credentials = data && data.credentials;
            if (!data || !credentials) return console.error('credentials invalid');
            callback({
                TmpSecretId: credentials.tmpSecretId,
                TmpSecretKey: credentials.tmpSecretKey,
                XCosSecurityToken: credentials.sessionToken,
                // 建议返回服务器时间作为签名的开始时间，避免用户浏览器本地时间偏差过大导致签名错误
                StartTime: data.startTime, // 时间戳，单位秒，如：1580000000
                ExpiredTime: data.expiredTime, // 时间戳，单位秒，如：1580000900
            });
        });
    }
    });
    */

    $(function () {
        initAddModal();
        bindFormSubmit();
        bindDeleteSubmit();
        bindUploadFile();
    });

    function bindUploadFile() {
        $('#uploadFile').change(function () {
            $('#progressList').empty();
            var checkFileSize = [];

            var fileList = $(this)[0].files;
            $.each(fileList, function (index, fileObj) {
                // 获取每个文件名称及大小
                checkFileSize.push({'name': fileObj.name, 'size': fileObj.size})
            });

            // 后台检验容量， 通过返回token, 反之返回错误信息
                var cos_obj = new COS({
                    getAuthorization: function (options, callback) {
                    // 异步获取临时密钥
                    // 通过post 携带文件参数发送的Django
                    $.post(COS_CREDENTIAL, JSON.stringify(checkFileSize), function (data) {
                        if (data.status){
                            var credentials = data && data.credentials;
                            if (!data || !credentials) return console.error('credentials invalid');
                            callback({
                                TmpSecretId: credentials.tmpSecretId,
                                TmpSecretKey: credentials.tmpSecretKey,
                                XCosSecurityToken: credentials.sessionToken,
                                // 建议返回服务器时间作为签名的开始时间，避免用户浏览器本地时间偏差过大导致签名错误
                                StartTime: data.startTime, // 时间戳，单位秒，如：1580000000
                                ExpiredTime: data.expiredTime, // 时间戳，单位秒，如：1580000900
                            });
                            $("#uploadProgress").removeClass('hide');
                        }else{
                            alert(data.err);
                            return;
                        }

                    });
                }
                });

            // 上传文件
            $.each(fileList, function (index, fileObj) {
                var fileName = fileObj.name;
                var fileSize = fileObj.size;
                var key = (new Date()).getTime() + "_" + fileName;
                // 上传文件

                // 进度条
                var tr = $("#progressTpl").find('tr').clone();
                tr.find('.name').text(fileName);
                $('#progressList').append(tr);

                cos_obj.putObject({
                    Bucket: '{{ request.tracer.project.bucket }}', /* 必须 */
                    Region: '{{ request.tracer.project.region }}',     /* 存储桶所在地域，必须字段 */
                    Key: key,              /* 必须 */
                    StorageClass: 'STANDARD',
                    Body: fileObj, // 上传文件对象
                    onProgress: function(progressData) {
                        var percent = progressData.percent * 100 + '%';
                        tr.find('.progress-bar').text(percent);
                        tr.find('.progress-bar').css('width', percent)
                    }
                }, function(err, data) {
                    console.log(err || data);
                    // 上传成功
                    if(data && data.statusCode === 200){
                        // 当前文件上传成功
                        $.post(FILE_POST,
                            {
                                name: fileName,
                                file_size: fileSize,
                                key: key,
                                file_path: data.Location,
                                parent: CURRENT_FOLDER_ID,
                                etag: data.ETag, //效验文件
                            }, function (res) {
                                // 写入数据库成功，将添加的数据显示到页面
                                var newTr = $('#rowTpl').find('tr').clone();
                                newTr.find(".name").text(res.data.name);
                                newTr.find(".file_size").text(res.data.file_size);
                                newTr.find(".update_user").text(res.data.username);
                                newTr.find(".update_datetime").text(res.data.datetime);
                                newTr.find(".delete").attr('data-fid', res.data.id);
                                newTr.find(".download").attr('href', res.data.download_url);

                                $('#rowList').append(newTr);
                                tr.remove();
                            })
                    }else{
                        tr.find(".progress-error").text('上传失败！')
                    }
                });
            })

        });
    }

    function bindDeleteSubmit() {
        $('#btnDelete').click(function () {
            // 获取要删除的id
            $.ajax({
                url: FILE_DELETE_URL,
                type: "GET",
                data: {fid:$(this).attr('fid')},
                success: function (res) {
                    if(res.status){
                        location.reload();
                    }
                }

            })
        })
    }

    function initAddModal() {
        $('#addModal').on('show.bs.modal', function (event) {
          var button = $(event.relatedTarget); // Button that triggered the modal
          var recipient = button.data('whatever'); // Extract info from data-* attributes
          var name = button.data('name'); // Extract info from data-* attributes
          var fid = button.data('fid'); // Extract info from data-* attributes
          // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
          // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
          var modal = $(this);
          modal.find('.modal-title').text(recipient);

          if(fid){
              // 编辑
              $('#id_name').val(name);
              modal.find('#fid').val(fid)
          }else{
              // 新建文件夹
              modal.find('.error-msg').empty();
              $("#form")[0].reset()
          }


});
        $('#alertModal').on('show.bs.modal', function (event) {
          var button = $(event.relatedTarget); // Button that triggered the modal
          var fid = button.data('fid'); // Extract info from data-* attributes
          // If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
          // Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
          var modal = $(this);
          modal.find('#btnDelete').attr('fid', fid);

})
    }
    
    function bindFormSubmit() {
        $('#btnFormSubmit').click(function () {
            console.log($('#form').serialize());
            $.ajax({
                //url:FOLDER_URL,
                url: location.href,
                method: "post",
                data: $('#form').serialize(),
                dataType: "JSON",
                success: function (res) {
                    console.log(res);
                    if (res.status){
                        location.reload(true);
                    }
                    else {
                        console.log(res.error);
                        $.each(res.error, function (k, v) {
                            $("#id_" + k).next().text(v[0]);
                            console.log(v[0])

                        })
                    }

                }
            })
        })
    }
    
    </script>
{% endblock %}
